<template>
    <div class="app-container">

        <!-- 添加、批量删除按钮等标题栏 -->
        <div class="filter-container add1">
            <el-form style="">
                <el-form-item>
                    <!-- 按钮级别的控制,使用hasPerm来判断是否应该有添加这个按钮 -->
                    <el-button type="primary" @click="outerTypeVisible = true ; displayDangerTypeInfo = false">数据字典类型配置</el-button>
                    <el-button type="primary" icon="plus" @click="showCreate" v-if="hasPerm('article:add')">{{textMap.createTxt}}</el-button>
                    <el-button type="danger" v-if="multipleSelectionFlag" @click="delSelect">{{textMap.batchDeleteTxt}}</el-button>
                </el-form-item>
            </el-form>
            <el-tag type="success" v-if="this.displayCurrentTypeInfo">当前选择的数据字典类型为{{finalTxt}}</el-tag>
        </div>
        
        <!-- 关键词状态、搜索栏 -->
        <div class="searchWord">
            <br>
            <el-input v-model="search" placeholder="请输入搜索内容" @input="inputFunction()"></el-input>
        </div>
        <br>

        <!-- 列表显示栏 -->
        <el-table class="tabless" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row 
        :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
                <!-- 复选框 -->
                <el-table-column type="selection" width="55" v-if="displayItem.select">
                </el-table-column>

                <el-table-column align="center" label="序号" width="80" v-if="displayItem.id">
                    <template slot-scope="scope">
                        <!-- 文章的索引，设置自增等序列 -->
                        <span v-text="getIndex(scope.$index)"> </span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="dataName" label="名称" style="width: 60px;" v-if="displayItem.name"></el-table-column>
                <el-table-column align="center" prop="dataCode" label="代码" style="width: 60px;" v-if="displayItem.code"></el-table-column>
                <el-table-column align="center" prop="dataType" label="类型" style="width: 60px;" v-if="displayItem.type"></el-table-column>
                <el-table-column align="center" prop="state" label="状态" style="width: 60px;" v-if="displayItem.state"></el-table-column>
                <el-table-column align="center" prop="dataMark" label="备注" style="width: 60px;" v-if="displayItem.mark"></el-table-column>
                
                <el-table-column align="center" label="管理" width="200" v-if="displayItem.manageMent">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="edit" @click="showUpdate(scope.$index)">{{textMap.updateTxt}}</el-button>
                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">{{textMap.deleteTxt}}</el-button>
                    </template>
                </el-table-column>

        </el-table>
        
        <el-dialog title="数据字典类型配置" :visible.sync="outerTypeVisible">
            <!-- 添加、修改、删除数据字典类型 -->
            <el-tag type="success" v-if="this.displayCurrentTypeInfo">当前选择的数据字典类型为{{finalTxt}}</el-tag>
            <el-tag type="danger" v-if="this.displayDangerTypeInfo">请先选定数据字典类型</el-tag>
            <div>
                <el-tree
                    :data="dirList"
                    :props="defaultProps"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    :render-content="renderContent">
                </el-tree>
            </div>
            
            <el-dialog
                width="30%"
                :title="textMap[typeDialogStatus]"
                :visible.sync="innerTypeVisible"
                append-to-body>
                <el-form class="small-space" :model="tempDataType" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
                    <el-form-item :label="textMap['nameTypeTxt']" required v-if="typeDialogStatus=='createTypeTxt' | typeDialogStatus=='updateTypeTxt'">
                        <el-input type="text" v-model="tempDataType.typeName"></el-input>         
                    </el-form-item>
                    <el-form-item :label="textMap['codeTypeTxt']" required v-if="typeDialogStatus=='createTypeTxt' | typeDialogStatus=='updateTypeTxt'">
                        <el-input type="text" v-model="tempDataType.typeCode"></el-input>
                    </el-form-item>
                    <el-form-item :label="textMap['markTxt']" required v-if="typeDialogStatus=='createTypeTxt' | typeDialogStatus=='updateTypeTxt'">
                        <el-input type="textarea" v-model="tempDataType.typeMark"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="innerTypeVisible = false">{{textMap.clearTxt}}</el-button>
                    <el-button v-if="typeDialogStatus=='createTypeTxt'" type="primary" @click="createDataDicType" :disabled="disableCreate">{{textMap.addTxt}}</el-button>
                    <el-button type="primary" v-if="typeDialogStatus=='updateTypeTxt'" @click="updateDataDicType">{{textMap.updateTxt}}</el-button>    
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outerTypeVisible = false">取 消</el-button>
                <el-button type="primary" @click="createFirstDicType">创建一级字典类型</el-button>
            </div>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">{{textMap.deleteDigTxt}}</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">{{textMap.clearTxt}}</el-button>
                <el-button type="primary" @click="deleteRow" >{{textMap.okTxt}}</el-button>
            </span>
        </el-dialog>

        <!-- 批量删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisibleByBatch" width="300px" center>
            <div class="del-dialog-cnt">{{textMap.batchDeleteDigTxt}}</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisibleByBatch = false">{{textMap.clearTxt}}</el-button>
                <el-button type="primary" @click="delAll" >{{textMap.okTxt}}</el-button>
            </span>
        </el-dialog>

        <!-- 信息增加、修改框 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form class="small-space" :model="tempData" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
                <el-form-item :label="textMap['nameTypeTxt']" required v-if="dialogStatus=='createTxt' | dialogStatus=='updateTxt'">
                    <el-input type="text" :disabled="true" v-model="finalTxt"></el-input>       
                </el-form-item>
                <el-form-item :label="textMap['nameTxt']" required v-if="dialogStatus=='createTxt' | dialogStatus=='updateTxt'">
                    <el-input type="text" v-model="tempData.dataName"></el-input>       
                </el-form-item>
                <el-form-item :label="textMap['codeTxt']" required v-if="dialogStatus=='createTxt' | dialogStatus=='updateTxt'">
                    <el-input type="text" v-model="tempData.dataCode"></el-input>       
                </el-form-item>
                <el-form-item :label="textMap['stateTxt']" required>
                    <el-select v-model="tempData.typeState" placeholder="请选择" v-show="true">
                        <el-option
                            v-for="item in typeStateList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="textMap['markTxt']" required v-if="dialogStatus=='createTxt' | dialogStatus=='updateTxt'">
                    <el-input type="textarea" v-model="tempData.dataMark"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{textMap.clearTxt}}</el-button>
                <el-button v-if="dialogStatus=='createTxt'" type="primary" @click="createDicData" :disabled="disableCreate">{{textMap.addTxt}}</el-button>
                <el-button type="primary" v-if="dialogStatus=='updateTxt'" @click="updateDicData">{{textMap.updateTxt}}</el-button>    
            </div>
        </el-dialog>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum" 
            :page-size="listQuery.pageRow"
            :total="totalCount"
            :page-sizes="[3,10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            class="pagination">
        </el-pagination>
    </div>

</template>

<script>
export default {
    data() {
        return {
            outerTypeVisible: false,
            innerTypeVisible: false,
            defaultProps: {
                children: 'children',
                label: 'label'
            },

            dirList: [],//数据字典类型相关数据

            totalCount: 0, //分页组件--数据总条数
            list: [],//表格的数据
            listLoading: false,//数据加载等待动画

            //弹出框的相关配置
            dialogStatus: 'createTxt',
            dialogFormVisible: false,

            //翻页功能的相关配置
            listQuery: {
                pageNum: 1,//页码
                pageRow: 10,//每页条数
                name: '',//搜索词
                finalTid: -1, //类型编号
            },

            textMap: {
                deleteTxt: '删 除',
                batchDeleteTxt: '批量删除',
                updateTxt: '修 改',
                clearTxt: '取 消',
                okTxt: '确 定',
                addTxt: '创 建',
                createTxt: '添加数据字典',
                nameTxt:'数据字典名称',
                codeTxt:'参数代码',
                stateTxt:'状态',
                createTypeTxt: '添加数据字典类型',
                updateTypeTxt: '修改数据字典类型',
                nameTypeTxt:'数据字典类型',
                codeTypeTxt:"数据字典类型代码",
                createTimeTxt:'创建时间',
                updateTimeTxt:'修改时间',
                markTxt:'备注',
                deleteDigTxt: '删除后数据不可恢复，是否确定删除？',
                batchDeleteDigTxt: '批量删除后数据不可恢复，是否确定批量删除？',
            },

            // 搜索框中的内容
            search:'',
            // 记录显示字段
            displayItem:{
                select:true,
                id:true,
                name:true,
                code:true,
                type:true,
                mark:true,
                state:true,
                manageMent:true,
            },

            //该对象组织前端添加数据字典类型信息，以POST请求形式传到后台
            tempDataType: {
                typeId: -1,
                typePid: -1,
                typeName: "", 
                typeCode: "", 
                typeMark: "",
            },

            typeStateList: [{
                value: 0,
                label: '启用'
            }, {
                value: 1,
                label: '禁用'
            }],

            //数据字典配置中添加和删除，以及选择状态提示
            typeDialogStatus: 'createTypeTxt',
            displayCurrentTypeInfo: false,
            displayDangerTypeInfo: false,
            //该字段存储的是选定的字符类型
            finalTid: -1,
            finalTxt: "",
            
            //该对象组织前端添加数据字典信息，以POST请求形式传到后台
            tempData: {
                dataId: -1,
                dataTypeId: -1,
                dataName: "", 
                dataCode: "", 
                dataMark: "",
                typeState: 0,
            },

            //实时匹配输入数据，因为相同的关键词不能够重复输入（实时从后台返回来的数据)
            disableCreate:false,

            //删除提示弹框的状态
            delVisible:false,
            //批量删除提示弹框的状态
            delVisibleByBatch:false,

            //批量删除存储的数据项列表
            multipleSelection:[],
            multipleSelectionFlag : true,
        }
    },
    created() {
        this.finalType = "";
        this.getList();
        this.getDataDirList();
    },
    methods: {
        appendType(data) {
            this.typeDialogStatus = "createTypeTxt"
            this.tempDataType.typeName = "";
            this.tempDataType.typeCode = "";
            this.tempDataType.typeMark = "";
            this.tempDataType.typePid = data.id;
            this.innerTypeVisible = true;
        },
        changeType(data) {
            this.typeDialogStatus = "updateTypeTxt"
            this.tempDataType.typeId = data.id;
            this.tempDataType.typeName = data.label;
            this.tempDataType.typeCode = data.code;
            this.tempDataType.typeMark = data.description;
            this.innerTypeVisible = true;
        },
        chooseType(data) {
            this.finalTid = data.id;
            this.finalTxt = data.label;
            this.displayCurrentTypeInfo = true;
            this.displayDangerTypeInfo = false;
            this.outerTypeVisible = false;
            this.getList();
        },
        removeType(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            this.tempDataType.typeId = data.id;
            // const index = children.findIndex(d => d.id === data.id);
            // children.splice(index, 1);
        },
        renderContent(h, { node, data, store }) {
            if(data.children.length == 0){
                return (
                <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                    <span>
                        <span>{data.id}-{node.label}</span>
                    </span>
                    <span>
                        <el-button style="font-size: 12px;" type="text" on-click={ () => this.chooseType(data) }>选定</el-button>
                        <el-button style="font-size: 12px;" type="text" on-click={ () => this.appendType(data) }>创建</el-button>
                        <el-button style="font-size: 12px;" type="text" on-click={ () => this.changeType(data) }>修改</el-button>
                        <el-button style="font-size: 12px;" type="text" on-click={ () => this.removeType(node, data) }>删除</el-button> 
                    </span>
                </span>);
            }else{
                return (
                <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                    <span>
                        <span>{data.id}-{node.label}</span>
                    </span>
                    <span>
                        <el-button style="font-size: 12px;" type="text" on-click={ () => this.appendType(data) }>创建</el-button>
                        <el-button style="font-size: 12px;" type="text" on-click={ () => this.changeType(data) }>修改</el-button>
                        <el-button style="font-size: 12px;" type="text" disabled>删除</el-button> 
                    </span>
                </span>);
            }
        },


        getDataDirList() {
            //查询列表
            this.listLoading = true;
            this.api({
                url: "/dataDic/listDicType",
                method: "get"
                }).then(data => {
                    this.dirList = data.list;
                })
        },
        getList() {
            //查询列表
            this.listLoading = true;
            this.listQuery.finalTid = this.finalTid;
            this.api({
                url: "/dataDic/listDicData",
                method: "get",
                params: this.listQuery
                }).then(data => {
                    console.log(data)
                    this.listLoading = false;
                    this.list = data.list;
                    this.tables = data.list;
                    this.totalCount = data.totalCount;
                })
        },
        getListBySearch(val) {
            // console.log("val:"+val);
            //查询列表
            if (!this.hasPerm('article:list')) {
                return
            }
            this.listLoading = true;
            this.listQuery.finalTid = this.finalTid;
            this.listQuery.value = val;
            // console.log(this.listQuery);
            this.api({
                url: "/dataDic/searchDicData",
                method: "get",
                params: this.listQuery
            }).then(data => {
                // console.log(data)
                this.listLoading = false;
                this.list = data.list;
                this.totalCount = data.totalCount;
            })
        },
        createDataDicType() { 
            this.api({
                url: "/dataDic/addDicType",
                method: "post",
                data: this.tempDataType
            }).then(() => {
                let msg = "添加成功";
                this.innerTypeVisible = false;
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1 * 1000,
                    onClose: () => {
                        this.tempDataType.typeName = "";
                        this.tempDataType.typeCode = "";
                        this.tempDataType.typeMark = "";
                        this.getDataDirList();
                    }
                })
            })
        },
        createFirstDicType() {
            this.typeDialogStatus = "createTypeTxt"
            this.tempDataType.typeName = "";
            this.tempDataType.typeCode = "";
            this.tempDataType.typeMark = "";
            this.tempDataType.typePid = 0;
            this.innerTypeVisible = true;
        },
        updateDataDicType() {
            this.api({
            url: "/dataDic/updateDicType",
            method: "post",
            data: this.tempDataType
            }).then(() => {
                let msg = "修改成功";
                this.innerTypeVisible = false;
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1 * 1000,
                    onClose: () => {
                        this.tempDataType.typeName = "";
                        this.tempDataType.typeCode = "";
                        this.tempDataType.typeMark = "";
                        this.getDataDirList();
                    }
                })
            })
        },
        createDicData() {
            this.tempData.dataTypeId = this.finalTid;
            this.api({
                url: "/dataDic/addDic",
                method: "post",
                data: this.tempData
            }).then(() => {
                let msg = "添加成功";
                this.dialogFormVisible = false;
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1 * 1000,
                    onClose: () => {
                        this.tempData.dataName = "";
                        this.tempData.dataCode = "";
                        this.tempData.dataMark = "";
                        if(this.search == ""){
                            this.getList();
                        }else{
                            this.getListBySearch();
                        }   
                    }
                })
            })
        },
        updateDicData() {
            this.api({
            url: "/dataDic/updateDic",
            method: "post",
            data: this.tempData
            }).then(() => {
                let msg = "修改成功";
                this.dialogFormVisible = false;
                this.$message({
                    message: msg,
                    type: 'success',
                    duration: 1 * 1000,
                    onClose: () => {
                        this.tempData.dataName = "";
                        this.tempData.dataCode = "";
                        this.tempData.dataMark = "";
                        if(this.search == ""){
                            this.getList();
                        }else{
                            this.getListBySearch();
                        }
                    }
                })
            })
        },
        // 确定删除
        deleteRow(){
            let _vue = this;
            // 写自己的删除的对象
            // console.log(this.delarr)
            console.log("_vue.list:");
            console.log(_vue.list);
            console.log("_vue.index:"+_vue.idx);
            let rowItem = _vue.list[_vue.idx];
            //rowItem.deleteStatus = '2';
            console.log("rowItem:");
            console.log(rowItem);
            _vue.api({
                url: "/dataDic/deleteDic",
                method: "post",
                data: rowItem
            }).then(() => {
                console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
                if(this.search == ""){
                    _vue.getList();
                }
                else{
                    // alert("我怎么就空了呢？")
                    _vue.getListBySearch(this.search);
                }
            }).catch(() => {
                _vue.$message.error("删除失败")
            })
            this.delVisible = false;//关闭删除提示模态框
        },
        delSelect(){
            const length = this.multipleSelection.length;
            if(length == 0){
                this.delWarnInfo();
            }else{
                this.delVisibleByBatch = true;//显示删除弹框
            }
        },
        // 当批量删除的时候,如果要是没有选中,弹出提醒
        delWarnInfo() {
            this.$message('请选择您要删除的数据');
        },
        //批量删除
        delAll() {
            var lengths = this.multipleSelection.length;
            
            for (let i = 0; i < lengths; i++) {
                console.log(this.multipleSelection[i]);
                this.api({
                    url: "/dataDic/deleteDic",
                    method: "post",
                    data: this.multipleSelection[i]
                }).then(() => {
                    if(this.search == ""){
                        // alert("我不空啊")
                        this.getList();
                    }
                    else{
                        // alert("我怎么就空了呢？")
                        this.getListBySearch(this.search);
                    }
                }).catch(() => {
                    this.$message.error("删除失败")
                })
            }
            this.delVisibleByBatch = false;//关闭删除提示模态框
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        },
        showUpdate($index) {
            //显示修改对话框
            //绑定相应内容
            this.tempData.dataName = this.list[$index].dataName;
            this.tempData.dataId = this.list[$index].id;
            this.tempData.dataCode = this.list[$index].dataCode;
            this.tempData.dataMark = this.list[$index].dataMark;

            this.dialogStatus = "updateTxt"
            this.dialogFormVisible = true
        },
        //单行删除
        handleDelete(index, row) {
            console.log("index:"+index);
            console.log(row);
            this.idx = index;
            this.msg=row;//每一条数据的记录
            // this.delarr.push(this.msg.PackingId);//把单行删除的每条数据的id添加进放删除数据的数组
            this.delVisible = true;
        },
        getIndex($index) {
            //表格序号
            return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
        },
        handleSizeChange(val) {
            //改变每页数量
            this.listQuery.pageRow = val
            this.handleFilter();
        },
        handleCurrentChange(val) {
            //改变页码
            this.listQuery.pageNum = val
            this.getList();
            
        },
        handleFilter() {
            //查询事件
            this.listQuery.pageNum = 1
            this.getList()
        },
        inputFunction(){
            console.log(this.search);
            console.log(this.search == "");
            if(this.search){
                this.getListBySearch(this.search);
            }
            if(this.search == ""){
                this.getList();
            }
        },
        showCreate() {
            if(this.finalTid == -1){
                this.outerTypeVisible = true;
                this.displayDangerTypeInfo = true;
            }else{
                //显示新增对话框
                this.tempData.dataName = "";
                this.tempData.dataCode = "";
                this.tempData.dataMark = "";
                this.dialogStatus = "createTxt";
                this.dialogFormVisible = true
            }
        },
        createFilter(queryString) {
                return (staff) => {
                return (staff.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
            };
        },
    }
}
</script>

<style>
.el-table .warning-row {
    background:whitesmoke;
    
     /* background: #ffffff; */
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  
  .pagination{
    background-color:lavender;
    margin-right: 0%;
    text-align: right;
  }

  .searchWord .add1{
    display: inline;
  }

</style>


